<script src="__PUBLIC__/vendors/colpick/js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="__PUBLIC__/vendors/colpick/css/colpick.css" type="text/css"/>

{php}
if (!isset($default_color))
{
    $default_color='3289c7';
}
{/php}

<div class="row">
    <div class="col-xs-12">
        <input maxlength="6" style="border-color:#{$default_color};border-right:34px solid #{$default_color};" placeholder="背景色进制" name="[color-name]" autocomplete="off" type="text" id="color_picker" class="form-control" value="{$default_color}" />
    </div>
</div>

<script>

    $(function () {
        $('#color_picker').colpick({
            //flat:true,
            layout: 'full',
            submit: 0,
            color:'{$default_color}',
            onChange:function(hsb,hex,rgb,el,bySetColor) {

                $(el).css('border-color','#'+hex);

                // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.

                if(!bySetColor) $(el).val(hex);

            }

        }).keyup(function(){

            $(this).colpickSetColor(this.value);

        });
    });
</script>